<template>
	<view class="login-container">
		<!-- 提示登录的图标 -->
		<!-- <a href="https://pumped-teal-genuinely.ngrok-free.app/login"></a> -->
		<!-- <web-view src="https://pumped-teal-genuinely.ngrok-free.app/login"></web-view> -->
		<button class="btn-img" open-type="chooseAvatar" @chooseavatar="imgUrl">
			<image :src="avatarUrl" alt="" class="imgs"></image>
		</button>
		<input type="nickname" class="ipt" placeholder="请输入昵称" :value="val" @change="changeValue">
		<!-- <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons> -->
		<!-- 显示昵称 -->
		<!-- 登录按钮 -->
		<!-- 可以从 @getuserinfo 事件处理函数的形参中，获取到用户的基本信息 -->
		<button type="primary" class="btn" @click="getUserProfile">授权登录</button>
		<!-- 登录提示 -->
		<view class="tips-text">登录后没什么权益</view>
	</view>
	
</template>

<script>
	// 1. 按需导入 mapMutations 辅助函数
	import { mapMutations,mapState } from 'vuex'
	export default {
		name:"my-login",
		data() {
			return {
				//头像url地址
				avatarUrl: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
				val:''
			};
		},
		computed: {
			// 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
			...mapState('m_user', ['redirectInfo','userinfo']),
		},
		
		methods: {
			...mapMutations('m_user',['updateUserInfo','updateToken','updateRedirectInfo','touXiangMing']),
			changeValue: function(e){
				this.val = e.target.value;
			}, // 改变value值
			// 获取微信用户的基本信息
			getUserProfile(e) {
				
				if (this.avatarUrl == 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0' || this.val == '') {
					return uni.$showMsg('请选择头像跟名称')
				}
				// this.imgNiCheng = JSON.parse(this.imgNiCheng)
				// this.imgNiCheng = 
				this.touXiangMing({
					img : this.avatarUrl,
					name : this.val
				})
				// uni.setStorageSync('imgNiCheng', JSON.stringify(this.imgNiCheng))
				
				console.log('ee',e)
				// 判断是否获取用户信息成功
				if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！')
				
				uni.getUserProfile({
				  desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				  success: (res) => {
					console.log('用户信息',res)
					//  将用户的基本信息存储到 vuex 中
					this.updateUserInfo(res.userInfo)
					// 获取登录成功后的 Token 字符串
					this.getToken(res)
				  },
				  fail: (err) => {
					  console.log('err',err)
				  }
				})
			},
			//获取临时头像url
			imgUrl(e) {
				console.log('临时url',e)
				this.avatarUrl = e.detail.avatarUrl
				// this.userinfo.avatarUrl = e.detail.avatarUrl
			},
			//调用登录接口
			async getToken(info) {
				
				// 调用微信登录接口
				const result = uni.login({
					onlyAuthorize:true,
					success: async (res) => {
						console.log('登录',res,info)
						// 准备参数对象
						const query = {
							code: res.code,
							encryptedData: info.encryptedData,
							iv: info.iv,
							rawData: info.rawData,
							signature: info.signature,
						}
						console.log('参数',query)
						// 换取 token
						// const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query)
						// console.log('loginResult',loginResult)
						//调用本地服务器
						uni.showLoading({
							title: '加载中...',
						})
						uni.request({
							url:'http://u5sxp2.natappfree.cc/login',  //https://pumped-teal-genuinely.ngrok-free.app/login
							data:{
								code:res.code
							},
							success: (res) => {
								// let a = document.querySelectorAll("button")
								// if (a) {
								// 	a[0].click()
								// }
								
								console.log('本地',res.data)
								if (res.data.msg !== '登录成功') return uni.$showMsg('登录失败！')
								uni.$showMsg('登录成功')
								// // 更新 vuex 中的 token
								this.updateToken(res.data.token)
								// // 判断 vuex 中的 redirectInfo 是否为 null
								// // 如果不为 null，则登录成功之后，需要重新导航到对应的页面
								this.navigateBack()
								uni.hideLoading()
							}
						})
					},
					fail: (err) =>{
						// 判断是否 wx.login() 调用失败
						 return uni.$showError('登录失败！')
						 
					}
				})   //.catch(err => err)   [err, res]
				
			},
			// 返回登录之前的页面
			navigateBack() {
				// redirectInfo 不为 null，并且导航方式为 switchTab
				if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
					// 调用小程序提供的 uni.switchTab() API 进行页面的导航
					uni.switchTab({
						// 要导航到的页面地址
						url: this.redirectInfo.from,
						// 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null
						complete: () => {
							this.updateRedirectInfo(null)
						}
					})
				}
			}
			
		}
	}
</script>

<style lang="scss">
.login-container {
	//登录盒子样式
	height: 750rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f8f8f8;
	position: relative;
	overflow: hidden;
	//绘制盒子底部的半椭圆
	&::after{
		content:'.';
		display: block;
		position: absolute;
		width: 100%;
		height: 40px;
		left: 0;
		bottom: 0;
		background-color: white;
		border-radius: 100%;
		transform: translateY(50%);
	}
	//登录按钮样式
	.btn {
	  border: none;
	  outline: none;
	  background-color: #6c5ce7;
	  padding: 10px 20px;
	  font-size: 12px;
	  font-weight: 700;
	  color: #fff;
	  border-radius: 15px;
	  transition: all ease 0.1s;
	  box-shadow: 0px 5px 0px 0px #a29bfe;
	  width: 90%;
	  margin: 15px 0;
	  
	}
	.btn:active {
	  transform: translateY(5px);
	  box-shadow: 0px 0px 0px 0px #a29bfe;
	}
	//按钮下方消息提示样式
	.tips-text {
		font-size: 12px;
		color: gray;
	}
}
.imgs {
	// width: 100px;
	// height: 100px;
	// border-radius: 50px;
	object-fit: cover; /* 或者其他适当的值，如 contain */
	  width: 100%; /* 图片宽度占满按钮 */
	  height: 100%; /* 图片高度占满按钮 */
	// overflow: hidden;
	// transform: translateX(-16px);
	
}
.ipt {
	width: 90%;
	height: 50px;
	text-align:center;
}
.btn-img {
	// display: none;
	width: 100px;
	height: 100px;
	padding: 0;
	margin: 0;
	// border-radius: 50%;
	border-style:none;
	display: inline-flex;
	align-items: center;
	// background-color: white;
	// border: 1px solid white;
	
}
</style>